<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <link rel="stylesheet" type="text/css" href="statics/css/iview.css">
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
    <script type="text/javascript" src="statics/lib/vue.min.js"></script>
    <script type="text/javascript" src="statics/lib/iview.min.js"></script>
    <script type="text/javascript" src="statics/lib/vue-resource.js"></script>
    <script type="text/javascript" src="statics/lib/jquery.min.js"></script>

</head>
<style>
    .login{
        width: 300px;
        height: 200px;
        margin: auto;
        margin-top: 20%;
    }
</style>

<body style="background-image: url(statics/images/bg.jpg);background-attachment: fixed;background-repeat: no-repeat;background-size: cover;">
<div id="app" class="login">
    <i-form ref="formInline" :model="formInline" :rules="ruleInline" >
        <form-item>
            <h2 align="center">登陆</h2>
        </form-item>
        <form-item prop="user" >
            <i-input type="text" v-model="formInline.user" placeholder="Username">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
            </i-input>
        </form-item>
        <form-item prop="password" >
            <i-input type="password" v-model="formInline.password" placeholder="Password">
                <icon type="ios-locked-outline" slot="prepend"></icon>
            </i-input>
        </form-item>
        <form-item>
            <i-button type="success" @click="handleSubmit('formInline')" long>SUBMIT</i-button>
        </form-item>
    </i-form>

</div>
<script>
    new Vue({
        el: '#app',
        data: {
            formInline: {
                user: '',
                password: ''
            },
            ruleInline: {
                user: [
                    { required: true, message: 'Please fill in the user name', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                    { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                ]
            }
        },
        methods: {
            handleSubmit:function (name) {
                var vm = this;
                this.$refs[name].validate(function (valid) {
                    if (valid) {
                        console.info(vm.formInline);
                        $.ajax({
                            url: '/login',
                            type: 'post',
                            data: {
                                account:vm.formInline.user,
                                password:vm.formInline.password
                            },
                            success: function(result) {
                                console.info(result);
                               if(result.code == 0){
                                   parent.location.href ='index.html';
                                }
                            }
                        });
//                        vm.$http.post('/login', vm.formInline).then(successCallback, errorCallback);
                        console.info(name);
//                        vm.$http.post("/login", vm.formInline).then(
//                            function (response) {
//                                vm.$set('item', {})
//                            }
//                        );
//
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            }
        }
    })
</script>
</body>
</html>